<template>
  <view>
    <view class="mainBox">
      <!-- 顶部图片活动信息 -->
      <view class="topImgBox">
        <view class="leftImgBox">
          <image src="/static/hotspot/bg2.png" mode="aspectFit"></image>
        </view>
        <view class="rightTextBox">
          <view class="title"> 04.26上海摇爪公园宠物春游计划 </view>
          <view class="text1">
            <view class=""> 时间：2025-04-26 10:00-19:00 </view>
            <view class=""> 地点：上海摇爪宠物公园 </view>
          </view>
          <view class="text2">
            <view class="">
              <text class="priceText1">￥588.00</text>
              <text class="priceText2">/人</text>
            </view>
            <view class="numText"> X 1位 </view>
          </view>
          <view class="text3" @click="gotoSuccessOrder"> 待使用 > </view>
        </view>
      </view>
      <view class="UserInfo">
        <view class="disspb">
          <text class="text1">活动参与人</text>
          <text class="text2">晨晨臣</text>
        </view>
        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">联系方式</text>
          <text class="text2">18536252657</text>
        </view>
        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">实付款</text>
          <text class="text2">￥588.00</text>
        </view>
        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">订单编号</text>
          <text class="text2">303563864770</text>
        </view>
        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">支付方式</text>
          <text class="text2">微信支付</text>
        </view>
        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">支付时间</text>
          <text class="text2">2025-04-24 10:21:30 </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {};
  },
  methods: {
    gotoSuccessOrder() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            hideNavBar: "0",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            navtitle: "待使用",
            url: "http://192.168.101.147:8080/#/pages/hotspot/orderDetailSuccess",
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.pushNewWebVC(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.pushNewWebVC.postMessage({
            hideNavBar: "0",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            navtitle: "待使用",
            url: "http://192.168.101.147:8080/#/pages/hotspot/orderDetailSuccess",
          });
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

.mainBox {
  margin: 32rpx 26rpx;
  padding: 32rpx;
  background-color: #ffffff;
}

.topImgBox {
  display: flex;

  .leftImgBox {
    margin-right: 16rpx;

    image {
      width: 284rpx;
      height: 328rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }

  .rightTextBox {
    flex: 1;

    .title {
      font-weight: bold;
      font-size: 30rpx;
      color: #303030;
      margin-bottom: 20rpx;
    }

    .text1 {
      font-weight: 400;
      font-size: 20rpx;
      color: #303030;
      margin-bottom: 64rpx;
      white-space: nowrap;
    }

    .text2 {
      display: flex;
      justify-content: space-between;

      .priceText1 {
        font-weight: bold;
        font-size: 32rpx;
        color: #303030;
      }

      .priceText2 {
        font-weight: bold;
        font-size: 20rpx;
        color: #303030;
      }

      .numText {
        font-weight: bold;
        font-size: 32rpx;
        color: #303030;
      }
    }

    .text3 {
      font-weight: 400;
      font-size: 24rpx;
      color: #c69c6d;
      line-height: 40rpx;
      text-align: right;
      margin-top: 26rpx;
    }
  }
}

.UserInfo {
  margin-top: 52rpx;

  .lineBox {
    width: 100%;
    height: 0rpx;
    border: 2rpx solid #f8f8f8;
    margin: 18rpx auto 20rpx;
  }

  .disspb {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text1 {
      font-weight: 500;
      font-size: 24rpx;
      color: #7f7f7f;
    }

    .text2 {
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
    }
  }
}
</style>
